<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
            <el-form-item prop="storeName">
                <el-input v-model="searchForm.storeName" clearable placeholder="商家名称"></el-input>
            </el-form-item>
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="手机号"></el-input>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.mchtStatus" size="small" @change="handleSearch()">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in statusList">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"  stripe v-loading="loading">
            <el-table-column prop="storeName" label="商家名称" width="200" align="center"></el-table-column>
            <el-table-column prop="userName" label="姓名" width="200" align="center"> </el-table-column>
            <el-table-column prop="telephone" label="手机号" width="120" align="center"> </el-table-column>
            <el-table-column prop="mchtCd" label="商户号" width="138" align="center"> </el-table-column>
            <el-table-column prop="idCardNumber" label="身份证号"  align="center"></el-table-column>
            <el-table-column prop="name" label="身份证正面" align="center" width="110">
              <template #default="scope">
                 <el-image :src="scope.row.idCardFrontPic" fit="fill" v-image-preview="scope.row.idCardFrontPic" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="身份证反面"  align="center" width="110">
              <template #default="scope">
                 <el-image :src="scope.row.idCardBackPic" fit="fill" v-image-preview="scope.row.idCardBackPic" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="bankName" label="银行名称"  align="center"></el-table-column>
            <el-table-column prop="bankNumber" label="银行卡号"  align="center"></el-table-column>

            <el-table-column prop="address" label="营业执照地址" align="center" width="240">
              <template #default="scope">
                {{scope.row.region}}{{scope.row.address}}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="商户号审核状态" align="center" width="120">
              <template #default="scope">
                <el-tag v-if="scope.row.mchtStatus==1">待审核</el-tag>
                <el-tag type="success" v-else-if="scope.row.mchtStatus==2">审核通过</el-tag>
                <el-tag type="warning" v-else-if="scope.row.mchtStatus==3">审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="mchtStatusDesc" label="审核说明"   align="center" width="240"></el-table-column>

            <el-table-column prop="name" label="操作"  width="150" align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <el-button
                    v-if="scope.row.mchtCd"
                    size="medium"
                    type="text"
                    icon="el-icon-notebook-1"
                    @click="handleVerificationCode(scope.row)"
                  >重发验证码</el-button>
                  <el-button
                    v-else
                    size="medium"
                    type="text"
                    icon="el-icon-circle-plus-outline"
                    @click="handleReg(scope.row)"
                  >注册</el-button>

                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-order"
                    @click="handleDetail(scope.row)"
                  >详情</el-button>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

      <el-dialog title="详情" width="600px" v-dialogDrag :visible.sync="detailVisible" @close="detailVisible = false">
          <el-descriptions column="1">
              <el-descriptions-item label="商家名称">{{statusRow.storeName}}</el-descriptions-item>
              <el-descriptions-item label="注册商户号">{{statusRow.mchtCd}}</el-descriptions-item>
              <el-descriptions-item label="入网申请号">{{statusRow.requestNo}}</el-descriptions-item>
              <el-descriptions-item label="审核说明">{{statusRow.mchtStatusDesc}}</el-descriptions-item>
          </el-descriptions>
      </el-dialog>
  </div>
</template>

<script>
  import {
   getStoreAccountList,sendNotifyRepeat,registerAccount
  } from '@/api/getData'
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        createTime:[],
        searchForm: {
          storeName:'',
          telephone:'',
          mchtStatus:'',
          pageNum: 1,
          pageSize: 20,
        },
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusList: [{
          id: '1',
          name: '待审核'
        }, {
          id: '2',
          name: '审核通过'
        }, {
          id: '3',
          name: '审核失败'
        }],
        dataList:[],

        multipleSelection: '',
        dialogTitle: '',
        detailVisible:false,
        statusRow:{}

      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight    - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {

      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.createTime, 'createTimeStart', 'createTimeEnd');
          this.loading = true;
          const result = await getStoreAccountList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      handleDetail(row){
        this.detailVisible = true;
        this.statusRow = row;
      },
      /** 重发验证码 **/
      handleVerificationCode(row){
        this.$confirm('您确定要重发验证码吗？(一天只有五次机会,验证码有效期30分钟,请谨慎操作)', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendNotifyRepeat({storeId:row.storeId}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                       message: result.msg,
                       type: 'success'
                     });
               }else{
                  this.$message.error(result.msg);
               }
           });
        }).catch(() => {
        });
      },
      /** 注册 **/
      handleReg(row){
        this.$confirm('您确定要注册吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          registerAccount({storeId:row.storeId}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                       message: result.msg,
                       type: 'success'
                     });
               }else{
                  this.$message.error(result.msg);
               }
           });
        }).catch(() => {
        });
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
